<template>
  <div>
    <el-card>
      <el-row :gutter="20" class="topLayout" type="flex" justify="start">
        <div class="inline" style="min-width:250px">
          <span>设备类型</span>
          <div class="flexBox">
            <div
              @click="changeSearchType(item.name)"
              v-for="item in typeList"
              :key="item.name"
              :class="searchForm.type == item.name ? 'selected' : ''"
            >{{ item.name }}</div>
          </div>
        </div>
        <div class="inline" style="min-width:350px">
          <span>设备状态</span>
          <div class="flexBox">
            <div
              @click="changeSearchState(item.value)"
              v-for="item in stateList"
              :key="item.value"
              :class="searchForm.state == item.value ? 'selected' : ''"
            >{{ item.name }}</div>
          </div>
        </div>
        <div class="inline">
          <el-input
            v-model="searchForm.search"
            placeholder="请输入关键字搜索"
            class="input-search"
            size="small"
          />
          <el-button type="primary" icon="el-icon-search" @click="getList" size="small">搜 索</el-button>
        </div>
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="24">
        <div style="margin: 20px">
          <el-table
            stripe
            :data="tableData"
            style="width: 100%; font-size: 14px"
            size="mini"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="index" label="编号" min-width="100" align="center" :index="table_index"></el-table-column>
            <el-table-column prop="deviceId" label="设备ID" min-width="120" sortable />
            <el-table-column prop="name" label="设备名称" min-width="140" sortable />
            <el-table-column prop="type" label="设备类型" min-width="80" />
            <el-table-column prop="state" label="状态" min-width="80">
              <template #default="{ row }">
                <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="removeProjectTime" label="删除时间" width="160" :formatter="dateFormat"/>
            <el-table-column prop="address" label="设备部署地址" min-width="160" show-overflow-tooltip/>
            <el-table-column prop="description" label="描述" width="160" />
            <!--<el-table-column prop="createTime" label="创建时间" width="180" :formatter="dateFormat"/>
            <el-table-column prop="updateTime" label="更新时间" width="180" :formatter="dateFormat"/>-->
          </el-table>
          <div class="pages-btn-box m-t">
            <el-pagination
              :current-page="page.current"
              :page-size="Number(page.size)"
              layout="prev, pager, next, jumper"
              :total="Number(page.total)"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>
      <!--<el-col :span="6">
        <china-map map-id="device"></china-map>
      </el-col>-->
    </el-row>
  </div>
</template>
<script>
  import { searchDeleted } from "@/api/projectManage";
  import { formatDate } from "@/utils/utils";
  import store from "@/store/modules/user";

  export default {
    components: {

    },
    data() {
      return {
        tableData: [],
        page: {
          current: 1,
          size: 10,
          total: 1
        },
        showDialog: false,
        downloadShowDialog: false,
        formData: {},
        projectId: "",
        searchForm: {
          type: "",
          state: "",
          search: ""
        },
        typeList: [{ name: "IEQ" }, { name: "PMS" }, { name: "OPT" }],
        stateList: [
          { value: "ONLINE", name: "在线" },
          { value: "OFFLINE", name: "离线" }
        ],
        selectArr: [],
        userInfo: store.state.userInfo
      };
    },
    filters: {
      stateFil(val) {
        switch (val) {
          case "ONLINE":
            return "在线";
          case "OFFLINE":
            return "离线";
          case "NEW":
            return "入库";
          case "DEPLOYED":
            return "已部署";

          default:
            break;
        }
      },
      stateFilter(state) {
        const stateMap = {
          ONLINE: "success",
          OFFLINE: "danger",
          NEW: ""
        };
        return stateMap[state];
      }
    },
    mounted() {
      this.getList();
    },
    methods: {
      table_index(index) {
        return (this.page.current - 1) * this.page.size + index + 1;
      },
      dateFormat(row, column) {
        if (column.property === "createTime") {
          return formatDate(new Date(row.createTime));
        } else if (column.property === "updateTime") {
          return formatDate(new Date(row.updateTime));
        } else if (column.property === "addProjectTime") {
          return formatDate(new Date(row.addProjectTime));
        }
      },
      getList() {
        this.projectId = this.$route.query.projectId;
        var { search, type, state } = { ...this.searchForm };
        var data = {
          projectId: this.projectId,
          pageNo: this.page.current,
          pageSize: this.page.size,
          search,
          type,
          state
        };
        searchDeleted(data).then(res => {
          this.tableData = res.value.values;
          this.page.total = res.value.total;
        });
      },
      changeSearchType(value) {
        if (this.searchForm.type == value) {
          this.searchForm.type = "";
        } else {
          this.searchForm.type = value;
        }
        this.getList();
      },
      changeSearchState(value) {
        if (this.searchForm.state == value) {
          this.searchForm.state = "";
        } else {
          this.searchForm.state = value;
        }
        this.getList();
      },
      changeVisible(e) {
        this.showDialog = e;
      },
      downloadVisible(e) {
        this.downloadShowDialog = e;
      },
      handleCurrentChange(val) {
        this.page.current = val;
        this.getList();
      },
      addDeviceFun() {
        this.changeVisible(true);
      },
      downloadData() {
        this.downloadVisible(true);
      },
      //表格选择事件
      handleSelectionChange(val) {
        this.selectArr = val;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .flexBox {
    display: flex;

    div {
      margin: 0 5px;
      border: 1px solid #aaa;
      padding: 5px 10px;
      font-size: 12px;
      border-radius: 5px;
      color: #aaa;
      cursor: pointer;
    }

    .selected {
      background-color: #1890ff;
      color: #fff;
    }
  }

  .topLayout {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
  }

  .inline {
    // max-width: 300px;
    margin: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .input-search {
    width: 260px;
    min-width: 150px;
    margin-right: 20px;
  }
</style>
<style>
  .btn-custom-cancel {
    float: right;
    margin-left: 10px;
  }
</style>
